<template>
    <div class="load">
        <div class="top">
            <div class="left">
                <div class="item">
                    <div class="label">
                        <span></span>
                        <span>货种</span>
                    </div>
                    <el-select v-model="form.goodsType" placeholder="请选择货种" size="small" style="width: 153px" clearable filterable>
                        <el-option v-for="(item,index) in goodsType" :key="index" :value="item.type" :label="item.name"></el-option>
                    </el-select>
                </div>
                <div class="item">
                    <el-button type="primary" class="search" @click="getFleetList(2)" icon="el-icon-search"
                        >查询</el-button
                    >
                </div>
            </div>
            <div class="right">
                <!-- <el-button type="primary" class="search" :loading="btnLoading" @click="addBox">新增车辆</el-button> -->
            </div>
        </div>
        <div class="table">
            <div class="titleLine">货物明细列表</div>
            <el-table
                :data="tableData"
                :header-cell-style="{ background: '#EEF1F5' }"
                style="width: 100%"
                @row-click="rowClick"
                :height="500"
            >
                <el-table-column prop="customerName" label="客户名称" width="230"> </el-table-column>
                <el-table-column prop="termCodeName" label="所属码头" width="180"> </el-table-column>
                <el-table-column prop="goodsTypeAlias" label="货种" width="180"> </el-table-column>
                <el-table-column prop="goodsName" label="货名" width="180"> </el-table-column>
                <el-table-column prop="morphology" label="货物形态" width="180"> </el-table-column>
                <el-table-column prop="storageYardName" label="堆场名称" width="180"> </el-table-column>
                <el-table-column prop="warehouseName" label="库位名称" width="180"> </el-table-column>
                <el-table-column prop="siteGoodsWeight" label="在场货重量" width="180"> </el-table-column>
                <el-table-column prop="weightUnit" label="重量单位" width="180"> </el-table-column>
                <el-table-column prop="siteGoodsAmount" label="在场货数量" width="180"> </el-table-column>
                <el-table-column prop="amountUnit" label="数量单位" width="180"> </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryAll.startpage"
                    :page-sizes="[10, 15, 30, 50]"
                    :page-size="queryAll.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="queryAll.totalNum"
                >
                </el-pagination>
            </div>
            <div class="titleLine">计划明细列表</div>
            <el-table
                :data="projectDetailList"
                :header-cell-style="{ background: '#EEF1F5' }"
                style="width: 100%"
            >
                <el-table-column prop="planNo" label="计划号" width="180"> </el-table-column>
                <el-table-column prop="operateTypeAlias" label="作业类型" width="180"> </el-table-column>
                <el-table-column prop="actualPlanWeight" label="实际重量" width="180"> </el-table-column>
                <el-table-column prop="planWeight" label="计划重量" width="180"> </el-table-column>
                <el-table-column prop="weightUnit" label="重量单位" width="180"> </el-table-column>
                <el-table-column prop="actualPlanAmount" label="实际数量" width="180"> </el-table-column>
                <el-table-column prop="planAmount" label="计划数量" width="180"> </el-table-column>
                <el-table-column prop="amountUnit" label="数量单位" width="180"> </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    export default {
        name: "loadList",
        data() {
            return {
                tableData: [],
                termList: [],
                condition: {
                    scdId: "",
                    voyType: "",
                    billno: "",
                    cntrno: ""
                },
                dialogVisible: false,
                visible: "box",
                btnLoading: false,
                btnLoading2: false,
                boxInfo: {},
                isChecked: false,
                currentIndex: -1,
                multipleSelection: {},
                queryAll: {
                    startpage: 1,
                    pagesize: 10,
                    totalNum: 0
                },
                form: {
                    goodsType: "", //货种
                },
				title:'',
				driverFlag:'',
                goodsType:[],
                projectDetailList:[]
            };
        },
        methods: {
            getFleetList(flag) {
                if(flag == 2){
                    this.queryAll.startpage = 1;
                }
                let params = {
                    current: this.queryAll.startpage,
                    size: this.queryAll.pagesize,
                    goodsType: this.form.goodsType,
                };
                this.$api.getGoodDetailsList(params).then((res) => {
                    if(res.data.data){
                        this.tableData = res.data.data.records;
                        this.queryAll.totalNum = res.data.data.total
                    }else{
                        this.tableData = [];
                        this.queryAll.startpage = 1;
                        this.queryAll.totalNum = 0;
                    }
					// if (flag) {
					// 	this.tableData.map(item =>{
					// 		if (item.id ==this.multipleSelection.id) {
					// 			this.$set(this,"multipleSelection",item)
					// 			console.log(this.multipleSelection);
					// 		}
					// 	})
					// }
                });
            },
            getGoodsType(){
                let params = {
                    goodsType:this.multipleSelection.goodsType || ''
                }
                this.$api.getGoodsType(params).then(res=>{
                    this.goodsType=res.data
                }).catch()
            },
            rowClick(v) {
                this.multipleSelection = v;
                this.getDetailList()
            },
            getDetailList(){
                this.$api.getProjectList().then(res=>{
                    this.projectDetailList = res.data.data
                }).catch(e=>{
                    console.log(e)
                })
            },
            handleSizeChange(val) {
                this.queryAll.startpage = 1;
                this.queryAll.pagesize = val;
                this.getFleetList();
            },
            handleCurrentChange(val) {
                this.queryAll.startpage = val;
                this.getFleetList();
            },
			successAdd(){
				this.$message.success('新增司机成功')
				this.getFleetList()
			},
			successDel(){
				this.$message.success('删除司机成功')
				this.getFleetList(1)
			}
        },

        computed: {},

        mounted() {
            this.condition.voyType = this.$route.name == "unloadList" ? "I" : "E";
            this.condition.scdId = this.$route.query.id;
            this.getFleetList();
            this.getGoodsType()
        }
    };
</script>
<style lang="scss" scoped>
    .load {
        background: #fff;
        padding: 20px;
    }
    .top {
        display: flex;
        align-items: flex-start;

        border-bottom: 1px solid #d7d7d7;
        box-sizing: border-box;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 16px;
        display: flex;
        .item {
            display: flex;
            align-items: center;
            margin-right: 20px;
            margin-bottom: 17px;
            .label {
                margin-right: 5px;
                width: 80px;
                span:first-child {
                    color: #ff3838;
                }
            }
        }
        .search {
            background: #0f47b8;
            height: 30px;
            padding: 5px 10px;
        }
        .del {
            height: 30px;
            padding: 5px 10px;
        }
        .left {
            display: flex;
            flex: 1;
            flex-wrap: wrap;
        }
    }
    .titleLine{
        padding: 10px 0;
    }
    :deep.el-dialog__footer {
        text-align: center;
        .el-button {
            color: #fff;
            background: #0f47b8;
            height: 30px;
            width: 100px;
            padding: 5px 10px;
        }
    }
    :deep.el-dialog__header {
        padding: 0;
    }
    :deep.el-dialog__body {
        padding: 20px;
    }
    .pagination {
        // height: 50px;
        margin: 10px;
        text-align: right;
    }
</style>
